<template>
  <view class="billboard-box">
    <view
        class="billboard-item"
        v-for="(item, index) in listData"
        :key="item.id"
        @click="onClick(item)"
    >
      <view class="billboard-left">
        <image v-if="index == 0" src="https://minio.gzryzl.com/huatai/2024-11-12/1731400274163ranking-1.png" mode=""></image>
        <image
            v-else-if="index == 1"
            src="https://minio.gzryzl.com/huatai/2024-11-12/1731400327670ranking-2.png"
            mode=""
        />
        <image
            v-else-if="index == 2"
            src="https://minio.gzryzl.com/huatai/2024-11-12/1731400345360ranking-3.png"
            mode=""
        />
      </view>
      <view class="billboard-right">
        <view class="info">
          <view class="billboard-title">
            {{ item.name }}
          </view>
          <view class="billboard-other" v-if="typeName == '企业'">
            <text class="date">成立日期：{{ item.time }}</text>
            <text>区域：{{ item.counties || '' }}</text>
          </view>
          <view class="billboard-other" v-else-if="typeName == '个人'">
            <text>TA 在</text>
            <text>{{ item.deputy }}</text>
          </view>
          <view class="billboard-other" v-else-if="typeName == '集体'">
            <text>成立于{{ item.time }}</text>
            <text>法定代表人：{{ item.deputy }}</text>
          </view>
        </view>
        <view class="score" v-if="item.showScore">
          <view class="score-title">
            荣誉分
          </view>
          <view class="score-value">
            {{ useAddCommas(item.total) }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {useAddCommas} from "../../utils/formatHooks";

/**
 * billboard 企业排名
 * @property { Array[objeckt] } listData 按钮样式类名和标题
 * @value name 企业名称/个人名称
 * @value time 成立时间
 * @value deputy 代表人/所在公司名称
 * @value id 公司数据id
 * * @property { String["企业"|"个人"|"集体"] } typeName 副标题类型
 * @value 企业   成立于2017年3月1日  法定代表人：李峰
 * @value 个人   TA 在 贵州华泰智远大数据服务有限公司
 * @value 集体   成立于2017年3月1日  法定代表人：李峰
 * @event {Function} click 点击 billboard-item 触发事件
 *@example  <card :list-data="[
 {
 id: '1',
 name: '贵州华泰智远大数据服务有限公司',
 time: '2017年3月31日',
 deputy: '刘南余',
 },
 ]" @on-click="onCard"></card>
 **/
export default {
  name: "billboard",
  props: {
    listData: {
      type: Array,
      default: new Array(),
    },
    typeName: {
      type: String,
      default: "企业",
    },
  },
  methods: {
    useAddCommas,
    onClick(data) {
      this.$emit("on-click", data);
    },
  },
};
</script>

<style lang="less">
.billboard-box {
  width: 90vw;
  margin: 65rpx auto 0;

  .billboard-item {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    height: 120rpx;

    .billboard-left {
      width: 80rpx;
      text-align: center;
      line-height: 120rpx;

      image {
        width: 42rpx;
        height: 42rpx;
      }
    }

    .billboard-right {
      display: flex;
      width: 89%;

      .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;

        .billboard-title {
          max-width: 452rpx;
          font-size: 31rpx;
          font-weight: 400;
          font-family: "ali";
          color: #272636;
          margin-bottom: 10rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .billboard-other {
          display: flex;
          flex-direction: column;
          font-size: 25rpx;
          color: #9b9b9b;
          font-weight: 400;
          transform: scale(0.85) translate(-9%, 0);
          // transform: translate(0%,0);
          .date {
            max-width: 452rpx;
            white-space: nowrap;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }

      .score {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: end;

        &-title {
          font-family: 'ali-l';
          font-size: 20rpx;
          color: #ff9c00;
        }

        &-value {
          font-family: 'DIN';
          font-size: 32rpx;
          color: #ff9c00;
        }
      }
    }
  }
}
</style>
